<template>
  <ul class="type-list-wrapper clearfix">
    <li v-for="(type, idx) in types" :key="idx"
    :class="{
      bgSlightBlue: typeSelect[idx],
      colorBlue: typeSelect[idx]
    }"
    @click="toggleSelect(idx)"
    >
      {{ type }}
    </li>
  </ul>
</template>

<script>
  export default {
    props: {
      types: {
        type: Array,
        default: () => []
      },
      typeSelect: {
        type: Array
      }
    },
    emits: ['update:typeSelect'],
    methods: {
      toggleSelect(idx) {
        let update = Array.from(this.typeSelect);
        update[idx] = !update[idx];
        this.$emit('update:typeSelect', update);
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--typeListWidth);
@lh: var(--typeListLineHeight);

.type-list-wrapper {
  width: @w;

  li {
    float: left;
    margin-right: calc(@w * 0.02);
    margin-bottom: calc(@w * 0.01);
    border-radius: calc(@lh * 0.1);
    padding: 0 @lh;
    background-color: var(--light);
    font-size: calc(@lh * 0.5);
    line-height: @lh;

    &:hover {
      cursor: pointer;
    }
  }
}
</style>